<template>
  <div class="app-container">
    <el-card style="overflow: initial;">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-form-item label="请选择产品:" prop="productList">
          <div style="">
            <div class="product-img">
              <div
                class="product-img-box"
                v-for="(item, idx) in form.productList"
                :key="item.id"
              >
                <el-tooltip effect="dark" :content="item.name" placement="top">
                  <img style="" :src="item.pic" alt="" />
                </el-tooltip>

                <i
                  @click="delProduct(idx, item.id)"
                  style="color: #ccc; font-weight: bold"
                  class="el-icon-close i2"
                ></i>
              </div>

              <div
                style="line-height: 96px; margin-right: 10px"
                v-if="form.productList.length < 1"
              >
                <div class="uploadPic" @click="selectPic()">
                  <i
                    style="font-size: 40px; color: #ccc; font-weight: bold"
                    class="el-icon-plus i1"
                  ></i>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="请选择问题:" prop="questionId">
          <treeselect
            style="width: 500px"
            v-model="form.questionId"
            :options="treelist"
            :normalizer="normalizer"
            placeholder="请选择问题"
            :default-expand-level="2"
          />
        </el-form-item>
        <el-form-item label="答案类型:" prop="type">
          <el-radio-group v-model="form.type" @change="typeChange">
            <el-radio label="1">文本</el-radio>
            <el-radio label="2">图片</el-radio>
            <el-radio label="3">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="答案:" prop="content" v-if="form.type == '1'">
          <el-input
            style="width: 500px"
            v-model="form.content"
            type="textarea"
            maxlength="200"
            show-word-limit
            :rows="4"
          ></el-input>
        </el-form-item>

        <el-form-item label="答案图片:" prop="linkUrl" v-if="form.type == '2'">
          <single-upload
            uploadType="2"
            @uploadSucces="uploadSucces"
            v-model="form.linkUrl"
          >
            <div class="uploadPic" v-if="!form.linkUrl">
              <i
                style="font-size: 40px; color: #ccc; font-weight: bold"
                class="el-icon-plus"
              ></i>
            </div>
          </single-upload>
        </el-form-item>
        <el-form-item label="答案视频:" prop="linkUrl" v-if="form.type == '3'">
          <div style="display: flex">
            <uploadVideo
              cateId="1000635065"
              :objData="{
                title: '1234',
              }"
              v-model="form.linkUrl"
              @editVideoId="editVideoId"
            ></uploadVideo>
            <div
              style="
                margin-left: 20px;
                color: #aaa;
                line-height: 30px;
                margin-top: 20px;
                font-size: 14px;
              "
            >
              <div>温馨提示</div>
              <div>1、支持MP4格式的视频文件</div>
              <div>2，大小限制在1024MB以下</div>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <div>
            <el-button @click="cancle" style="width: 100px">取消</el-button>
            <el-button
              style="width: 100px"
              type="primary"
              @click="submitForm('form')"
              >保存</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
const form = {
  questionId: null,
  type: "1", //  1->文本；2->图片；3->视频',
  videoId: "",
  linkUrl: "",
  content: "",
  productList: [],
};
import {
  getMachineNoPage,
  addAnswerItem,
  getAnswerById,
  updateAnswerApi
} from "@/api/IntelligentService";
import { handleTree } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import SingleUpload from "@/components/Upload/uploadOne";
import uploadVideo from "@/components/uploadVideo/uploadVideo";
export default {
  components: { Treeselect, SingleUpload, uploadVideo },
  data() {
    return {
      form: Object.assign({}, form),
      rules: {
        productList: [
          { required: true, message: "请选择产品", trigger: "blur" },
        ],
        questionId: [
          { required: true, message: "请选择问题", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择答案类型", trigger: "blur" }],
        content: [{ required: true, message: "请输入答案", trigger: "blur" }],
        linkUrl: [{ required: true, message: "请上传答案", trigger: "blur" }],
      },
      treelist: [],
    };
  },

  async created() {
    if (this.$route.query.id) {
      this.$route.meta.title = "编辑问题";
      this.getInfo(this.$route.query.id);
    }
    this.getTreeList();
  },
  methods: {
    getInfo(id) {
      getAnswerById(id).then((res) => {
        this.$set(this.form, "id", res.data.id);
        this.form.type = res.data.type + "";
        this.form.content = res.data.content;
        this.form.videoId = res.data.videoId;
        this.form.linkUrl = res.data.linkUrl;
        this.form.questionId = res.data.questionId;
        this.form.productList = [
          {
            id: res.data.productId,
            pic: res.data.pic,
            name: res.data.productName,
          },
        ];
      });
    },
    async getTreeList() {
      const res = await getMachineNoPage();
      let treeData = handleTree(res.data);
      this.treelist = treeData;

      this.visible = true;
    },
    typeChange(e) {
      console.log("e", e);
      if (e == 1) {
        this.$refs.form.validateField("linkUrl");
        this.form.linkUrl = "";
      } else {
        this.$refs.form.validateField("content");
        this.form.content = "";
      }
    },
    cancle() {
      this.$router.back()
    },
    submitForm(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          let params = {
            productId: this.form.productList[0].id,
            questionId: this.form.questionId,
            type: this.form.type,
            content: this.form.content,
            videoId: this.form.videoId,
            linkUrl: this.form.linkUrl,
            id: this.form.id,
          };
          if (this.form.id) {
            updateAnswerApi(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                setTimeout(()=> {
                  this.$router.back();
                },1500)
              }
            });
          } else {
            addAnswerItem(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                setTimeout(()=> {
                  this.$router.back();
                },1500)
              }
            });
          }
        }
      });
    },
    editVideoId(v) {
      this.form.videoId = v;
      setTimeout(() => {
        this.$refs.form.validateField("linkUrl");
      }, 100);
    },
    uploadSucces() {
      this.$refs.form.validateField("linkUrl");
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },

    delProduct(idx) {
      this.form.productList.splice(idx, 1);
      this.$refs.form.validateField("productList");
    },

    selectPic() {
      let that = this;
      that.$modalGoodList(
        function (row) {
          if (row) {
            let app = row.map((v) => {
              return {
                id: v.id,
                name: v.name,
                pic: v.pic,
              };
            });
            that.$set(that.form, "productList", app);
            that.$refs.form.validateField("productList");
          }
        },
        "1",
        that.form.productList.map((v) => {
          return v.id;
        })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.product-img {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  .product-img-box {
    position: relative;
    .i2 {
      position: absolute;
      right: -1px;
      top: -5px;
    }
  }
  .uploadPic {
    width: 96px;
    height: 96px;
    // margin-left: 10px;
    background: #eeeeee;
    border-radius: 8px;
    position: relative;

    .i1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  img {
    width: 96px;
    height: 96px;
    margin-right: 13px;
  }
}

.uploadPic {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
